Drawing a background map is the first step of any geospatial analysis. Once this background is available, you can color each region to get a choropleth map, add points or bubble to get a bubble map, reshape the region to get a cartogram, or show connection with a connection map.
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"</canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
<!-- Create the data for the graph -->
var data = {
"y" : {
"data" : [
[2,56],
[3,124],
[5,35],
[3,46],
[35,234],
[37,76],
[2,23],
[50,45],
[42,78],
[3,90],
[78,43],
[6,57],
[7,123],
[13,23],
[24,59],
[38,87],
[65,25],
[87,95],
[34,73],
[1,23],
[23,56],
[67,56],
[46,29],
[25,50],
[98,53],
[24,28],
[33,16],
[55,23],
[65,4],
[12,28],
[73,65],
[24,19]
],
"smps" : ["Prop1","Prop2"],
"vars" : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32]
}
}
<-- Create the configuration for the graph -->
var config = {
"colorBy":"Prop1",
"decorations":{
"marker":[
{
"color":"red",
"coords":[
10.3932,
-75.4832
],
"label":"Cartagena",
"shape":"teardrop",
"size":4
},
{
"color":"blue",
"coords":[
12.5769,
-81.7051
],
"label":"San Andres",
"shape":"teardrop",
"size":6
}
]
},
"graphType":"Map",
"legendPosition":"bottomRight",
"mapId":"colombia",
"mapPropertyId":"ID_1",
"topoJSON":"https://www.canvasxpress.org/data/colombia.geo.json"
}
<!-- Call the CanvasXpress function to create the graph -->
var cX = new CanvasXpress("canvasId", data, config);
</script>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-colombia-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
colorBy="Prop1",
decorations=list(marker=list(list(color="red", coords=list(10.3932, -75.4832), label="Cartagena", shape="teardrop", size=4), list(color="blue", coords=list(12.5769, -81.7051), label="San Andres", shape="teardrop", size=6))),
graphType="Map",
legendPosition="bottomRight",
mapId="colombia",
mapPropertyId="ID_1",
topoJSON="https://www.canvasxpress.org/data/colombia.geo.json"
)